import React, { Component } from 'react'
class DemoFormInput extends Component {
  constructor() {
    super()
    this.state = {
      title: '受控组件',
      title1: '非受控组件标题',
    }
  }
  // 创建ref对象
  titleRef = React.createRef()

  updateTitle = (e) => {
    console.log('ee', e)
    this.setState({
      title: e.target.value,
    })
  }

  getTitle = (e) => {
    // 阻止浏览器默认行为
    e.preventDefault()
    console.log('ref-val', e, this.titleRef.current.value)
  }

  render () {
    // console.log('ref', this.titleRef)
    return (
      <>
        <form onSubmit={this.getTitle}>
          <h2>03.受控与非受控组件</h2>
          <div>
            <input type="text" value={this.state.title} readOnly />
          </div>
          <h2>04.非受控组件</h2>
          <div>
            <input type="text" ref={this.titleRef} />
            <button>获取input的内容</button>
          </div>
        </form>
      </>
    )
  }

}

export default DemoFormInput
